<template>
  <div style="width:100%">
    <div class="bg-white grid-content" style="text-align:center;">
      <el-form :inline="true" :model="sjfwForm" class="demo-form-inline">

        <el-form-item label="数据服务名称:">
          <el-input
            v-model="sjfwForm.fwmc"
            placeholder="请输入数据服务名称"
          ></el-input>
        </el-form-item>
        <el-form-item style="padding-left:150px" label="数据服务分类:">
          <el-select
                v-model="sjfwForm.pid"
                placeholder="请选择数据服务分类"
              >
              <el-option
                v-for="(item, index) in fwlxList"
                :key="item.id"
                :label="item.fwmc"
                :value="item.id"
              />
              <el-option label="新建分类" value="0"></el-option>
              </el-select>
        </el-form-item>
        <el-form-item style="padding-left:150px">
          <el-button type="primary" @click = "saveSjfw()">保存</el-button>
          <!-- <el-button type="success">取消</el-button> -->
        </el-form-item>
      </el-form>
    </div>

    <el-divider></el-divider>

    <el-row>
      <el-col :span="8">
        <div class="bg-white grid-content">
          <el-tree 
            :data="treeData" 
            node-key="id"
            :props="treeProps" 
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>({{ data.zdmc }})</span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="bg-white grid-content" style="padding-bottom:19px">
          <el-transfer
            v-model="transferValue"
            :titles="['数据项', '已选数据项']"
            :props="{
              key: 'id',
              label: 'zdbt'
            }"
            :data="sjzdData"
            @change="rightCheckChange">
          </el-transfer>
          <el-button type="primary" style="margin-left:34%;margin-top:-10px;" @click="saveSjfwInfo()">保存</el-button>
        </div>
      </el-col>
    </el-row>

   
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <div class="bg-white grid-content" style="text-align:center;">
          <el-form :inline="true" :model="sjfwConditionForm" class="demo-form-inline">
            <el-form-item> 
              <el-tooltip placement="top-start" effect="light">
                <div slot="content">多表关系：cd_well_source LEFT JOIN pc_organization ON cd_well_source.ORG_ID = pc_organization.ORG_ID<br/>and org_id = "1"</div>
                <el-button>填写示例</el-button>
              </el-tooltip>
            </el-form-item>

            <el-form-item label="多表关系：">

                <el-input type="textarea" v-model="sjfwConditionForm.cxtj"></el-input>

            </el-form-item>
            <el-form-item style="padding-left:220px" label="查询条件：">

                <el-input type="textarea" v-model="sjfwConditionForm.jhtj"></el-input>

            </el-form-item>
            <el-form-item style="padding-left:250px"> 
              <el-button type="primary" @click = "addDbgx()">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="bg-white grid-content">
          <el-table
            :data="sjfwgxList"
            :header-cell-style="{background:'#F5F7FA',color:'#909399'}"
            border
            stripe
            style="width: 100%; margin-bottom: 10px"
          >
            <el-table-column prop="cxtj" label="多表关系" width="500" align="center"></el-table-column>
            <el-table-column prop="jhtj" label="查询条件" width="500" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  size="small"
                  @click="handleDelete(scope.row)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import sjfwApi from "@/api/dtbb/sjfw";
import sjzdApi from "@/api/dtbb/sjzd";

export default{
data(){
  return{
    fwlxList:[],//数据服务分类列表
    sjfwID:'',
    treeData:[],
    //树形控件的属性绑定对象
    treeProps: {
        children: 'children',
        label: 'zdbt',
    },
    sjfwForm:{
      id:'',
      fwmc:'',
      fwlx:'',
      pid:'',
    },
    //获取点击的树形节点id
    checkTreeID:'',
    checkTreeZdbt:'',
    checkTreeZdmc:'',
    //穿梭框数据
    initZdList:[],
    initZdIdList:[],
    sjzdData:[],
    transferValue:[],
    returnResult:[],

    //
    sjfwConditionForm:{
      id:'',
      sjfwIndexId:'',
      cxtj:'',
      jhtj:'',
    },
    //表格数据
    sjfwgxList:[],
    
  }
},
created(){
  this.searchFwlx();
  this.getinfo();
  
},
mounted(){
  
  this.searchTreeList();
  this.searchDbgx(this.$route.query.fwid);


  this.searchSjfwInfo();
  // this.transferValue=[15,16]
},
methods: {
  //接收数据
  getinfo(){
    this.sjfwForm.id =this.$route.query.fwid;
    this.sjfwID = this.$route.query.fwid;
    this.sjfwForm.fwmc =this.$route.query.fwmc;
    this.sjfwForm.pid =this.$route.query.fwlx;
    console.log(this.sjfwForm);
  },
  /**
   * 查询服务类型
   */
   async searchFwlx() {
    // this.pageNo = pageNo; //当前页码
    // this.pageSize = pageSize; //每页显示数量
    //发送查询请求
    let res = await sjfwApi.getList({pageNo:-1,pageSize:-1,fwlx:'0'});
    //判断是否成功
    if (res.success) {
      console.log(res.data);
      //赋值
      this.fwlxList = res.data.records;
    }
  },
  //保存数据服务
  async saveSjfw(){
    if(this.sjfwForm.pid ==='0'){
      this.sjfwForm.fwlx ='0';
    }else{
      this.sjfwForm.fwlx ='1';
    }
    console.log('form'+JSON.stringify(this.sjfwForm));
    let res = await sjfwApi.update(this.sjfwForm);

    console.log(res)
    //判断是否成功
    if (res.success) {
        this.$message.success(res.message);
    } else {
        console.log(res)
        this.$message.error(res.message);
    }
  },
  /**
   * 查询树形列表
   */
   async searchTreeList() {
    // this.pageNo = pageNo; //当前页码
    // this.pageSize = pageSize; //每页显示数量
    //发送查询请求
    let res = await sjzdApi.getTreeList();
    //判断是否成功
    if (res.success) {
      console.log(res.data);
      //赋值
      this.treeData = res.data;
    }
  },
  //查询表对应的数据字典列表
  async searchList(id) {
    // this.pageNo = pageNo; //当前页码
    // this.pageSize = pageSize; //每页显示数量
    //发送查询请求
    let res = await sjzdApi.getList({pageNo:-1,pageSize:-1,pid:id});
    //判断是否成功
    if (res.success) {
      console.log(333333333)
      console.log(res.data);
      //赋值
      this.sjzdData = res.data.records;
    }
    
    console.log(this.sjzdData);
  },

  //点击树形节点
  handleNodeClick(data) {
    console.log(data);
    this.checkTreeID = data.id;
    this.checkTreeZdbt = data.zdbt;
    this.checkTreeZdmc = data.zdmc;
    this.searchList(data.id);
  },
  //穿梭框右侧变化
  rightCheckChange(){
    console.log(this.transferValue);
    this.returnResult=[];

    var arr=[];
    for(var i = 0 ; i < this.transferValue.length; i++){ 
        let obj={}
        
        obj= this.sjzdData.find((item)=>{
            return item.id === this.transferValue[i];
        });
        console.log(obj);
        arr.push(obj);
        
    }
    console.log(arr);

    for(let j=0; j<arr.length; j++){
      if(arr[j]!=undefined){
        let a ={id:'',sjzdId:arr[j].id,sjfwIndexId:this.sjfwID,zdbt:arr[j].zdbt,zdmc:arr[j].zdmc,sjybt:this.checkTreeZdbt,sjymc:this.checkTreeZdmc}
        this.returnResult.push(a);
      }
    }
      
      console.log(this.returnResult);
  },

  //查询数据服务字段详情
  async searchSjfwInfo() {
    // this.pageNo = pageNo; //当前页码
    // this.pageSize = pageSize; //每页显示数量
    //发送查询请求
    let res = await sjfwApi.getListInfo({sjfwIndexId:this.$route.query.fwid});
    // this.searchList(14);
    // // 判断是否成功
    if (res.success) {
      console.log(123);
      console.log(res.data);
      //赋值
      this.initZdList = res.data.records;

      var arr=[];
      for(let i=0; i<this.initZdList.length; i++){
        arr.push(this.initZdList[i].sjzdId);
      }
      console.log(arr);
      console.log(1111111); 
      this.initZdIdList = arr;
      this.transferValue = arr;
      console.log(this.transferValue);

    }
   
  },

  //保存数据服务字段详情
  async saveSjfwInfo(){
    // if(this.sjfwID!=''){
      console.log(this.returnResult);
      var arr= []
      for(let i=0; i<this.initZdIdList.length; i++){
          if(!this.transferValue.includes(this.initZdIdList[i])){
            arr.push(this.initZdIdList[i]);
            console.log(this.initZdIdList[i]);
          }
      }
      console.log(arr);
      var re= []
      for(let k=0; k<arr.length; k++){
        for(var j = 0 ; j < this.initZdList.length; j++){ 
          // console.log(this.initZdList[k].sjzdId);
          if(arr[k]==this.initZdList[j].sjzdId)
          
          re.push(this.initZdList[j].id);
          
        }
      }
      console.log(re);
      this.editdelete(re);

      this.returnResult = this.returnResult.filter(item => !this.initZdIdList.includes(item.sjzdId));
      console.log(this.returnResult);
      this.editadd(this.returnResult);

      console.log(this.initZdList);
    
    
  },
  async editadd(obj){
    let res = await sjfwApi.addList(obj);

    console.log(res)
    //判断是否成功
    if (res.success) {
        this.returnResult=[];
        this.$message.success(res.message);
    } else {
        console.log(res)
        this.$message.error(res.message);
    }
 
  },
  async editdelete(arr){
    let res = await sjfwApi.Bdelete(arr);

      console.log(res)
      //判断是否成功
      if (res.success) {
          // this.returnResult=[];
          this.$message.success(res.message);
      } else {
          console.log(res)
          this.$message.error(res.message);
      }
 
  },

  //保存数据服务关系
  async addDbgx(){
      console.log(this.sjfwConditionForm);
      this.sjfwConditionForm.sjfwIndexId = this.sjfwID;
      let res = await sjfwApi.addSQL(this.sjfwConditionForm);

      console.log(res)
      //判断是否成功
      if (res.success) {
          this.$message.success(res.message);
          this.searchDbgx(this.sjfwID);
      } else {
          console.log(res)
          this.$message.error(res.message);
      }

  },

  async handleDelete(row){
      let confirm = await this.$myconfirm("确定要删除该数据吗?");
        console.log(confirm)
        if (confirm) {
          //发送删除请求
          console.log('111')
          let res = await sjfwApi.deleteSQL({ id: row.id });
          console.log('222')
          console.log(res)
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.searchDbgx(this.sjfwID);
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
    },

  //查询数据服务关系
  async searchDbgx(id) {
    // this.pageNo = pageNo; //当前页码
    // this.pageSize = pageSize; //每页显示数量
    //发送查询请求
    let res = await sjfwApi.getSQLList({pageNo:-1,pageSize:-1,sjfwIndexId:id});
    //判断是否成功
    if (res.success) {
      console.log(res.data);
      //赋值
      this.sjfwgxList = res.data.records;
    }
  },


},

};
</script>


<style lang="scss" scoped>


//格子的样式
.bg-white {
background: #ffffff;
}

.grid-content {
padding: 20px 20px 0px 20px;
// margin-bottom: 10px;
border-radius: 4px;
margin: 0px auto;

}
.el-transfer{
padding-left: 66px;
}
.el-tree{
padding-left: 100px;
}

/* 设置穿梭框的 宽高 */
.el-transfer-panel{
width : 540px;
height: 400px;
}
.el-transfer-panel__list {
margin: 0;
padding: 6px 0;
list-style: none;
height: 390px;
overflow: auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.el-transfer__buttons {
display: inline-block;
vertical-align: middle;
padding: 0 30px;
}

.el-divider--horizontal{
margin: 0 0 0 0;
}

.el-textarea{
width: 200%;
}
</style>